<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useViewStore } from "../../store";
import { goBack } from "../../utils/index";
import { ref } from "vue";
import { getGoodDetail } from "../../service/goods";
import { BASE_URL } from "../../service/index";
import type { Good } from "../../types/good";
import { onLoad } from "@dcloudio/uni-app";
import { formatPrice } from "../../utils";

defineOptions({
  options: {
    styleIsolation: "shared",
  },
});

const { buttonRectInfo } = storeToRefs(useViewStore());
const current = ref<number>(0);
const loading = ref(true);
const good = ref<Good | null>(null);
const swiperList = ref<string[]>([]);

const previewImage = (e: any) => {
  const currentUrl = swiperList.value[current.value];
  uni.previewImage({
    urls: swiperList.value,
    current: currentUrl,
  });
};

onLoad((options) => {
  if (!options) {
    uni.showToast({ title: "参数错误", icon: "none" });
    loading.value = false;
    return;
  }
  console.log("页面加载参数:", options);
  const id = parseInt(options.id);
  if (id) {
    fetchGoodDetail(id);
  }
});

const fetchGoodDetail = async (id: number) => {
  loading.value = true;
  try {
    // 直接使用传入的id
    const data = await getGoodDetail(id);
    good.value = data;

    if (data.img) {
      swiperList.value = [`${BASE_URL}/api/file/${data.img}`];
    }
  } catch (error) {
    uni.showToast({ title: "获取产品详情失败", icon: "none" });
  } finally {
    loading.value = false;
  }
};
</script>

<template>
  <view class="nav">
    <wd-navbar left-arrow @click-left="goBack" custom-style="background-color: transparent !important;"
      :bordered="false">
      <template #title>
        <view class="search-box"></view>
      </template>
      <template #left>
        <view class="round-back-btn" :style="{
          marginTop: buttonRectInfo.top + buttonRectInfo.height + 20 + 'px',
        }">
          <wd-icon name="thin-arrow-left" size="12"></wd-icon>
        </view>
      </template>
    </wd-navbar>
  </view>

  <view v-if="loading" class="loading-container">
    <wd-loading type="outline" color="#242424"></wd-loading>
  </view>

  <view v-else-if="good" class="detail">
    <view class="img-wall">
      <wd-swiper :list="swiperList" autoplay v-model:current="current" :height="'800rpx'"
        @click="previewImage"></wd-swiper>
    </view>

    <view class="detail-info">
      <!-- 产品基本信息 -->
      <view class="product-header">
        <view class="product-name">{{ good.name }}</view>
        <view class="product-price-row">
          <view class="price-container">
            <text class="price-symbol">¥</text>
            <text class="price-integer">{{
              formatPrice(good.price).integer
            }}</text>
            <text class="price-decimal">.{{ formatPrice(good.price).decimal }}</text>
          </view>
          <view class="product-type">{{ good.type }}</view>
        </view>
      </view>

      <!-- 分隔线 -->
      <view class="info-divider"></view>

      <!-- 产品规格 -->
      <view class="product-specs">
        <view class="spec-item">
          <view class="spec-label">材质</view>
          <view class="spec-value">{{ good.material }}</view>
        </view>
        <view class="spec-item">
          <view class="spec-label">规格</view>
          <view class="spec-value">{{ good.size }}</view>
        </view>
      </view>

      <!-- 分隔线 -->
      <view class="info-divider"></view>

      <!-- 产品描述 -->
      <view class="product-description">
        <view class="section-title">产品简介</view>
        <view class="description-content">
          {{ good.description }}
        </view>
      </view>

      <!-- 操作按钮 -->
      <!-- <view class="product-actions">
        <view class="action-btn favorite">
          <wd-icon name="star-fill" size="40rpx" color="#999"></wd-icon>
          <text>收藏</text>
        </view>
        <view class="action-btn add-cart">加入购物车</view>
      </view> -->
    </view>
  </view>

  <view v-else class="error-container">
    <wd-status-tip image="content" tip="加载失败，请稍后重试" />
  </view>
</template>

<style lang="scss" scoped>
.round-back-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: #ffffffc9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.detail {
  display: flex;
  flex-direction: column;
}

.img-wall {
  position: relative;
}

.nav {
  position: fixed;
  z-index: 9;
}

.detail-info {
  padding: 40rpx 30rpx;
  background-color: #fff;
  position: relative;
  z-index: 2;

  /* 产品标题和价格 */
  .product-header {
    padding-bottom: 20rpx;

    .product-name {
      font-size: 38rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 20rpx;
      line-height: 1.4;
    }

    .product-price-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .product-price {
      font-size: 42rpx;
      font-weight: 700;
      color: #e4393c;
    }

    .product-type {
      font-size: 24rpx;
      color: #666;
      background-color: #f8f8f8;
      padding: 6rpx 20rpx;
      border-radius: 20rpx;
    }
  }

  /* 分隔线 */
  .info-divider {
    height: 1rpx;
    background-color: #f5f5f5;
    margin: 30rpx 0;
  }

  /* 产品规格 */
  .product-specs {
    .spec-item {
      display: flex;
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .spec-label {
        width: 140rpx;
        color: #999;
        font-size: 28rpx;
      }

      .spec-value {
        flex: 1;
        color: #333;
        font-size: 28rpx;
      }
    }
  }

  /* 产品描述 */
  .product-description {
    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 20rpx;
    }

    .description-content {
      font-size: 28rpx;
      color: #242424;
      line-height: 1.6;
      text-align: justify;
    }
  }
}

/* 新增样式 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80vh;
}

.product-actions {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
  margin-top: 40rpx;

  .action-btn {
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    border-radius: 40rpx;
  }

  .favorite {
    width: 120rpx;
    background-color: #f8f8f8;
    color: #999;
    display: flex;
    flex-direction: column;
    font-size: 24rpx;
  }

  .add-cart {
    flex: 1;
    background-color: var(--wot-color-theme);
    color: #fff;
    font-weight: 500;
  }
}
</style>
